<!DOCTYPE html>
<html>
<head>
<title>Polarization Ellipse Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="500"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // White background
  ctx.fillStyle = 'white';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  const cx = canvas.width / 2;
  const cy = canvas.height / 2;
  
  const rx = 85;  // Semi-minor axis (horizontal)
  const ry = 130; // Semi-major axis (vertical)
  const axisPadding = 40;
  const arrowSize = 10;
  const theta_deg = 22;
  const theta_rad = theta_deg * Math.PI / 180;

  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.lineWidth = 2.5;

  // --- Draw Axes ---
  // Horizontal axis
  const hAxisStart = cx - rx - axisPadding;
  const hAxisEnd = cx + rx + axisPadding;
  ctx.beginPath();
  ctx.moveTo(hAxisStart, cy);
  ctx.lineTo(hAxisEnd, cy);
  ctx.stroke();
  // Arrowhead for horizontal axis
  ctx.beginPath();
  ctx.moveTo(hAxisEnd, cy);
  ctx.lineTo(hAxisEnd - arrowSize, cy - arrowSize / 2);
  ctx.lineTo(hAxisEnd - arrowSize, cy + arrowSize / 2);
  ctx.closePath();
  ctx.fill();

  // Vertical axis
  const vAxisStart = cy + ry + axisPadding;
  const vAxisEnd = cy - ry - axisPadding;
  ctx.beginPath();
  ctx.moveTo(cx, vAxisStart);
  ctx.lineTo(cx, vAxisEnd);
  ctx.stroke();
  // Arrowhead for vertical axis
  ctx.beginPath();
  ctx.moveTo(cx, vAxisEnd);
  ctx.lineTo(cx - arrowSize / 2, vAxisEnd + arrowSize);
  ctx.lineTo(cx + arrowSize / 2, vAxisEnd + arrowSize);
  ctx.closePath();
  ctx.fill();

  // --- Draw Ellipse ---
  ctx.beginPath();
  ctx.ellipse(cx, cy, rx, ry, 0, 0, 2 * Math.PI);
  ctx.stroke();

  // --- Draw Vector and Angle ---
  // Vector from origin to ellipse
  // Angle phi is from the positive x-axis, counter-clockwise
  const phi_rad = Math.PI / 2 - theta_rad;
  const lineEndX = cx + rx * Math.cos(phi_rad);
  const lineEndY = cy - ry * Math.sin(phi_rad);
  ctx.beginPath();
  ctx.moveTo(cx, cy);
  ctx.lineTo(lineEndX, lineEndY);
  ctx.stroke();

  // Angle arc for theta
  const arcRadius = 45;
  // Canvas angles are clockwise from positive x-axis.
  // The arc goes from the vertical axis (-PI/2) to the vector (angle -phi_rad).
  ctx.beginPath();
  ctx.arc(cx, cy, arcRadius, -Math.PI / 2, -phi_rad);
  ctx.stroke();

  // --- Draw Labels ---
  const axisLabelFontSize = 24;
  const figCaptionFontSize = 24;
  const mainSymbolFontSize = 32;
  const subSymbolFontSize = 22;
  const angleSymbolFontSize = 24;

  // Axis labels
  ctx.font = `${axisLabelFontSize}px sans-serif`;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'bottom';
  ctx.fillText('vertical', cx, vAxisEnd - 5);
  ctx.textAlign = 'left';
  ctx.textBaseline = 'middle';
  ctx.fillText('horizontal', hAxisEnd + 10, cy);

  // Angle label theta
  ctx.font = `italic ${angleSymbolFontSize}px sans-serif`;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  // Position the label in the middle of the arc
  const mid_angle_rad = (-Math.PI / 2 - phi_rad) / 2;
  ctx.fillText('θ', cx + (arcRadius + 18) * Math.cos(mid_angle_rad), cy + (arcRadius + 18) * Math.sin(mid_angle_rad));

  // E2 label (in 2nd quadrant)
  ctx.font = `italic ${mainSymbolFontSize}px sans-serif`;
  ctx.fillText('E', cx - 45, cy - 50);
  ctx.font = `${subSymbolFontSize}px sans-serif`;
  ctx.fillText('2', cx - 28, cy - 45);

  // E3 label (in 4th quadrant)
  ctx.font = `italic ${mainSymbolFontSize}px sans-serif`;
  ctx.fillText('E', cx + 25, cy + 45);
  ctx.font = `${subSymbolFontSize}px sans-serif`;
  ctx.fillText('3', cx + 42, cy + 50);

  // Figure caption
  ctx.font = `bold ${figCaptionFontSize}px sans-serif`;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'top';
  ctx.fillText('Fig. 3.8', cx, vAxisStart + 10);

</script>
</body>
</html>